<template>
  <div class="column container">
    <div class="title q-my-md">Saved</div>
    <div class="row wrap fit q-gutter-md">
      <playlist-item
        class="col-4"
        :value="playlist"
        v-for="playlist in items"
        :key="playlist.id"
        @detail="showDetail(playlist)"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onBeforeMount, computed } from 'vue';
import PlaylistItem from 'components/playlist/PlaylistItem.vue';
import Playlist from 'src/models/Playlist';
import { useUserStore } from 'src/stores/user-store';
import { useGlobalStore } from 'src/stores/global-store';
const userStore = useUserStore();
const globalStore = useGlobalStore();
const currentUser = computed(() => userStore.currentUser);
const watchLater = new Playlist('0', 'Watch Later', 'No Description');
if (currentUser.value) {
  watchLater.creatorName = currentUser.value.name;
  watchLater.creatorId = currentUser.value.id;
  watchLater.creatorAvatar = currentUser.value.avatar;
}
const items = ref<Playlist[]>([]);
onBeforeMount(async () => {
  await userStore.getWatchLater({ page: 0, size: 20 });
  watchLater.contents = userStore.watchLater || [];
  if (watchLater.contents.length > 0) {
    watchLater.coverImage = watchLater.contents[0].coverImage;
  }
  items.value.push(watchLater);
  await userStore.getMyPlaylists({ page: 0, size: 20 });
  if (userStore.myPlaylists && userStore.myPlaylists.length > 0) {
    items.value = items.value.concat(userStore.myPlaylists);
  }
});
function showDetail(playlist: Playlist) {
  globalStore.setMyContentsRightDrawer(playlist);
}
</script>
